@keyframes record {
  0% {
    -webkit-transform: scaley(1);
    -o-transform: scaley(1);
    -moz-transform: scaley(1);
    -ms-transform: scaley(1);
    transform: scaley(1);
  }

  50% {
    -webkit-transform: scaley(0.4);
    -o-transform: scaley(0.4);
    -moz-transform: scaley(0.4);
    -ms-transform: scaley(0.4);
    transform: scaley(0.4);
  }

  100% {
    -webkit-transform: scaley(1);
    -o-transform: scaley(1);
    -moz-transform: scaley(1);
    -ms-transform: scaley(1);
    transform: scaley(1);
  }
}

.record-shape {
  width: auto;
}

.record-shape>view {
  width: 3px;
  height: 40px;
  margin-right: 8px;
  background-color: #e2ea04;
  border-radius: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: record 0.9s 0s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
  -o-animation: record 0.9s 0s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
  -ms-animation: record 0.9s 0s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
  -moz-animation: record 0.9s 0s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
  animation: record 0.9s 0s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
}

.record-shape>view:nth-child(1),
.record-shape>view:nth-child(4) {
  -webkit-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  -ms-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.record-shape>view:nth-child(2),
.record-shape>view:nth-child(5) {
  -webkit-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  -ms-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.record-shape>view:nth-child(3),
.record-shape>view:nth-child(6) {
  -webkit-animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  -ms-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.record-shape>view:nth-child(7),
.record-shape>view:nth-child(10) {
  -webkit-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  -ms-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.record-shape>view:nth-child(8),
.record-shape>view:nth-child(12) {
  -webkit-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  -ms-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.record-shape>view:nth-child(11) {
  -webkit-animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  -ms-animation-delay: 0.6s;
  animation-delay: 0.6s;
}